---
title: Button
description: Shows a button component.
---

{/* prettier-ignore-start */}
{/* prettier-ignore-end */}

import Code from '@/components/Code.astro';
import { LinkButton } from '@/components/react/LinkButton';
import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
import importedCode from '@rnr/reusables/components/ui/button?raw';

<LinkButton href="https://rn-primitives.vercel.app/types">
  Types Primitives
</LinkButton>
<LinkButton href='/components/text'>Text Component</LinkButton>
<LinkButton target="_blank" href="https://rnr-showcase.vercel.app/button">
  Demo
</LinkButton>

<br />

Shows a button component.

## Installation
<Tabs>
  <TabItem label='CLI'> 
    ```bash
    npx @react-native-reusables/cli@latest add button
    ```
  </TabItem>
  <TabItem label='Manual'>
    <Aside type="tip" title="Dependencies">
      Before copy/pasting, add the <a href='/components/text' className='text-white font-bold'>text component</a> to your project.
    </Aside>


    **Copy/paste the following code to `~/components/ui/button.tsx`**

    <Code code={importedCode} lang="tsx" title="~/components/ui/button.tsx" />
  </TabItem>
</Tabs>
## Usage

```tsx
import { Button } from '~/components/ui/button';
import { Text } from '~/components/ui/text';

function Example() {
  return (
      <Button>
        <Text>Default</Text>
      </Button>
  );
}
```

## Props

### Button

Extends [`Pressable`](https://reactnative.dev/docs/pressable#props) props

| Prop  |  Type  |             Note             |
| :---: | :----: | :--------------------------: |
| variant | 'default' \| 'destructive' \| 'secondary' \| 'link' \| 'outline' \| 'ghost' | _(optional)_ |
| size | 'default' \| 'sm' \| 'lg' \| 'icon' | _(optional)_ |
        